<template>
  <div class="app-container">
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-position="left"
      label-width="150px"
    >
      <el-card>
        <el-form-item label="题目类型 " prop="quType">
          <el-select
            v-model="formData.quType"
            :disabled="quTypeDisabled"
            class="filter-item"
            @change="handleTypeChange"
          >
            <el-option
              v-for="item in quTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="难度等级 " prop="level">
          <el-select v-model="formData.level" class="filter-item">
            <el-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="归属题库" prop="repoIds">
          <el-select multiple v-model="formData.repoIds" class="filter-item">
            <el-option
              v-for="item in repoList"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="题目内容" prop="content">
          <quill-editor
            v-model="formData.content"
            ref="myQuillEditor"
            style="height: 400px"
            :options="editorOption"
          />
        </el-form-item>

        <br /><br /><br /><br /><br /><br />

        <el-form-item label="试题图片">
          <el-upload
            v-bind:action="uploadUrl"
            list-type="picture-card"
            :headers="headers"
            name="head"
            :on-success="uploadSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="整题解析" prop="oriPrice">
          <el-input
            v-model="formData.analysis"
            type="textarea"
            :precision="1"
            :max="999999"
          />
        </el-form-item>
      </el-card>

      <div
        class="filter-container"
        style="margin-top: 25px"
        v-if="formData.quType != 4"
      >
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="small"
          plain
          @click="handleAdd"
        >
          添加
        </el-button>

        <el-table :data="formData.answers" :border="true" style="width: 100%">
          <el-table-column label="是否答案" width="120" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
            </template>
          </el-table-column>

          <el-table-column label="选项图片" width="220px" align="center">
            <template slot-scope="scope">
              <el-upload
                :limit="1"
                :action="uploadUrl"
                list-type="text"
                :headers="headers"
                name="head"
                :on-success="
                  (response, file, fileList) => {
                    return uploadSuccess(response, file, fileList, scope.row);
                  }
                "
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </template>
          </el-table-column>

          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.content" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="答案解析">
            <template slot-scope="scope">
              <el-input v-model="scope.row.analysis" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeItem(scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 20px">
        <el-button type="primary" @click="submitForm('formData')"
          >保存</el-button
        >
        <el-button type="info" @click="onCancel">返回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { findAll } from "@/api/repo";
import { quillEditor } from "vue-quill-editor";
import { save } from "@/api/qu";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: { quillEditor: quillEditor },
  data() {
    return {
      // 指定请求头
      headers: {
        token: localStorage.getItem("token"),
      },
      uploadUrl: "http://localhost:8080/upload",
      editorOption: {},
      quTypes: [
        { value: 1, label: "单选题" },
        { value: 2, label: "多选题" },
        { value: 3, label: "判断题" },
        { value: 4, label: "简答题" },
      ],
      levels: [
        { value: 1, label: "普通" },
        { value: 2, label: "较难" },
      ],

      formData: {
        quType: 1,
        level: 1,
        repoIds: [],
        content: "",
        image: "",
        answers: [
          { isRight: 0, content: "", analysis: "" },
          { isRight: 0, content: "", analysis: "" },
          { isRight: 0, content: "", analysis: "" },
          { isRight: 0, content: "", analysis: "" },
        ],
      },
      repoList: [],
      //表单校验
      rules: {
        repoIds: [
          { required: true, message: "归属题库不能为空", trigger: "change" },
        ],
        content: [
          { required: true, message: "题目内容不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleAdd() {
      this.formData.answers.push({ isRight: 0, content: "", analysis: "" });
    },
    removeItem(index) {
      this.formData.answers.splice(index, 1);
    },
    submitForm(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //校验成功提交表单
          // answers：0、错误，1、正确
          this.formData.answers.forEach((item) => {
            if (item.isRight === true) {
              item.isRight = 1;
            }
            if (item.isRight === false) {
              item.isRight = 0;
            }
          });

          save(this.formData).then((res) => {
            if (res.code == 0) {
              // 路由跳转
              this.$router.push({
                path: "/qu/list",
                query: { id: this.formData },
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    uploadSuccess(response, file, fileList, row) {
      //文件上传成功后触发函数
      if (!row) {
        //当前行为空，则表示上传的是题目文件
        this.formData.image = response.data;
      } else {
        row.image = response.data;
      }
    },
  },
  watch: {
    "formData.quType": {
      handler(newVal, oldVal) {
        if (newVal == 1 || newVal == 2) {
          //单选题和多选题
          this.formData.answers = [
            { isRight: 0, content: "", analysis: "" },
            { isRight: 0, content: "", analysis: "" },
            { isRight: 0, content: "", analysis: "" },
            { isRight: 0, content: "", analysis: "" },
          ];
        }
        if (newVal == 3) {
          //判断题
          this.formData.answers = [
            { isRight: 0, content: "", analysis: "" },
            { isRight: 0, content: "", analysis: "" },
          ];
        }
      },
    },
  },
  created() {
    //获取所有题库
    findAll().then((res) => {
      this.repoList = res;
    });
  },
};
</script>